<template>
    <div class="wrapper">
        <div class="rl-content white-card">
            <div class="search-box" ref="searchBar">
                <el-form :model="form" ref="form" size="medium" label-width="80px" class="demo-form">
                    <el-row :gutter="20">
                        <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="4">
                            <el-form-item label="使用状态">
                                <el-select v-model="form.useStatus" @change="getRedeemListFn" placeholder=""
                                    style="width: 100%">
                                    <el-option label="全部" value=""></el-option>
                                    <!-- <el-option label="未使用" value="10"></el-option> -->
                                    <el-option label="待激活" value="20"></el-option>
                                    <el-option label="已激活" value="30"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="4">
                            <el-form-item label="订单号">
                                <el-input v-model="form.orderNo" placeholder="请输入完整的订单号" style="width: 100%">
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="4">
                            <el-form-item label="手机号">
                                <el-input v-model="form.personPhone" placeholder="请输入手机号" style="width: 100%">
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="4">
                            <el-form-item label="邮寄情况">
                                <el-select v-model="form.deliverStatus" @change="getRedeemListFn" placeholder=""
                                    style="width: 100%">
                                    <el-option label="全部" value=""></el-option>
                                    <el-option label="已发货" value="30"></el-option>
                                    <el-option label="用户确认邮寄" value="20"></el-option>
                                    <el-option label="用户未确认邮寄" value="10"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="4">
                            <el-button type="primary" size="small" @click="getRedeemListFn">筛选</el-button>
                            <el-button size="small" @click="handleReset">重置</el-button>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <div class="table-wrap">
                <div class="operate-bar">
                    <el-button size="small" plain round @click="importData">申请订单兑换码</el-button>
                    <el-button size="small" plain round @click="exportData">{{ exportLoading ? "导出中..." : "导出数据"
                    }}</el-button>
                </div>
                <div :style="{ height: tableHeight + 'px' }">
                    <el-table :data="showList" height="100%" v-loading="loading" tooltip-effect="light"
                        :header-cell-class-name="'header_name_style'" :cell-style="{ color: '#000000' }">
                        <el-table-column prop="redeemCode" label="兑换码" min-width="160"></el-table-column>
                        <!-- <el-table-column prop="rightDetail" label="权益详情" min-width="150">
                            <template slot-scope="scope">
                                <span style="cursor:pointer;color:#6A4AFF" @click="checkRightDetail(scope.row)">查看</span>
                            </template>
                        </el-table-column> -->
                        <el-table-column prop="useStatus" label="使用情况" min-width="150"></el-table-column>
                        <el-table-column prop="originType" label="来源平台" min-width="150">
                            <!-- <template slot-scope="scope">
                                <span>
                                    {{ scope.row.originType }}
                                </span>
                            </template> -->
                        </el-table-column>
                        <el-table-column prop="cardTypeName" label="所属项目" min-width="150"></el-table-column>
                        <el-table-column prop="orderNo" label="订单号" min-width="150"></el-table-column>
                        <el-table-column prop="personPhone" label="用户手机号" min-width="150"></el-table-column>
                        <el-table-column prop="deliverStatus" label="邮寄情况" min-width="150"></el-table-column>
                        <!-- <el-table-column prop="deliverDate" label="邮寄时间" min-width="150"></el-table-column> -->
                        <el-table-column prop="deliverInfo" label="邮寄信息" min-width="150">
                            <template slot-scope="scope">
                                <span style="cursor:pointer;color:#00A8A2" @click="checkDeliverInfo(scope.row)"
                                    v-if="scope.row.deliverStatus == '已发货'">查看</span>
                                <span style="cursor:pointer;color:#7052FF" @click="writeDeliverInfo(scope.row)"
                                    v-else>填写</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="redeemDate" label="激活时间" min-width="150"></el-table-column>

                    </el-table>
                </div>
                <div class="pager">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page.sync="page.currentPage" :page-sizes="[10, 20, 30, 40, 50, 100]"
                        :page-size="page.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"
                        background></el-pagination>
                </div>
            </div>
        </div>
        <el-dialog class="my-dialog" title="申请订单兑换码" v-if="centerDialogVisible" :visible.sync="centerDialogVisible"
            top="7vh" width="900px" custom-class="no-header-dialog" :close-on-click-modal="false">
            <ImportData :redeemCode="redeemCode" :rcId="rcId" @closeImportData="closeImportData"></ImportData>
        </el-dialog>
        <el-dialog class="my-dialog" title="邮寄信息" v-if="deliverDialogVisible" :visible.sync="deliverDialogVisible" top="7vh"
            width="900px" custom-class="no-header-dialog" :close-on-click-modal="false">
            <DeliverInfo :orderNo="orderNo" :orderInfo="orderInfo" :currentStatus="currentStatus" :rcId="rcId"
                @closeDeliverInfo="closeDeliverInfo"></DeliverInfo>
        </el-dialog>
        <RightTreeDialog :cardType="currentCardType" :visible.sync="rightTreeVisible"></RightTreeDialog>
    </div>
</template>

<script>
import Axios from "axios";
import { apiJava } from "@/api/root";
import { downLoadFile } from "@/utils/downLoadFile";
import ImportData from './components/importData';
import DeliverInfo from "./components/deliverInfo.vue";
import RightTreeDialog from '../cardManage/components/RightTreeDialog'
import { getRedeemList } from "@/api";

export default {
    components: { ImportData, RightTreeDialog, DeliverInfo },
    data() {
        return {
            orderNo: '',
            orderInfo: '',
            currentStatus: '',// 传入子组件的状态来判断是查看还是填写
            redeemCode: '',
            rcId: '',
            currentCardType: "",
            rightTreeVisible: false,
            centerDialogVisible: false,//控制对话框显示隐藏
            deliverDialogVisible: false,//控制填写邮寄信息对话框显示隐藏
            exportLoading: false,
            loading: false,
            tableHeight: "auto",
            total: 0, // 数据条数
            page: {
                currentPage: 1,
                pageSizes: 10,
                pageSize: 10,
            },
            form: {
                useStatus: '',
                orderNo: '',
                deliverStatus: '',
                personPhone: '',
            },
            showList: [
                {
                    redeemCode: '1',
                    useStatus: '1',
                    plateForm: '1',
                    cardTypeName: '1',
                    orderNo: '1',
                    personPhone: '1',
                    redeemDate: '1',
                    deliverStatus: '1',
                }
            ],
        }
    },
    created() {
        window.addEventListener("resize", this.getHeight);
        this.getRedeemListFn();
    },
    mounted() {
        this.getHeight();
    },
    destroyed() {
        window.removeEventListener("resize", this.getHeight);
    },
    methods: {
        checkDeliverInfo(row) {
            this.orderInfo = JSON.parse(row.orderInfo);
            this.deliverDialogVisible = true;
            this.currentStatus = 'check';
            this.orderNo = row.orderNo;
        },
        writeDeliverInfo(row) {
            console.log(row);
            this.orderNo = row.orderNo;
            this.rcId = row.rcId;
            this.orderInfo = JSON.parse(row.orderInfo);
            this.deliverDialogVisible = true;
            this.currentStatus = 'write';
        },
        async handleCurrentChange() {
            const params = {
                pageNo: this.page.currentPage,
                pageSize: this.page.pageSize,
                useStatus: this.form.useStatus,
                deliverStatus: this.form.deliverStatus,
                // orderNo: this.form.orderNo,
                matchOrderNo: this.form.orderNo
            }
            const res = await getRedeemList(params);
            if (res.code == 200) {
                this.total = res.pageparam.sums;
                this.showList = res.data;
                this.showList.forEach(item => {
                    switch (item.deliverStatus) {
                        case 10:
                            item.deliverStatus = '用户未确认发货'
                            break;
                        case 20:
                            item.deliverStatus = '用户确认发货'
                            break;
                        case 30:
                            item.deliverStatus = '已发货'
                            break;
                        default:
                            item.deliverStatus = '--'
                            break;
                    }
                    switch (item.useStatus) {
                        case 10:
                            item.useStatus = '未使用'
                            break;
                        case 20:
                            item.useStatus = '待激活'
                            break;
                        case 30:
                            item.useStatus = '已激活'
                            break;
                        default:
                            item.useStatus = '--'
                            break;
                    }
                    switch (item.originType) {
                        case 10:
                            item.originType = '微信平台'
                            break;
                        case 20:
                            item.originType = '抖音平台'
                            break;
                        default:
                            item.originType = '--'
                            break;
                    }
                });
            }
        },
        handleSizeChange(val) {
            this.page.pageSize = val;
            this.getRedeemListFn();
        },
        handleReset() {
            this.form.useStatus = '';
            this.form.orderNo = '';
            this.form.deliverStatus = '';
            this.form.personPhone = '';
            this.page.pageSize = 10;
            this.page.currentPage = 1;
            this.getRedeemListFn();
        },
        async getRedeemListFn() {
            const params = {
                pageNo: 1,
                pageSize: this.page.pageSize,
                useStatus: this.form.useStatus,
                deliverStatus: this.form.deliverStatus,
                // orderNo: this.form.orderNo,
                matchOrderNo: this.form.orderNo,
                personPhone: this.form.personPhone,
            }
            const res = await getRedeemList(params);
            if (res.code == 200) {
                this.total = res.pageparam.sums;
                this.showList = res.data;
                this.showList.forEach(item => {
                    switch (item.deliverStatus) {
                        case 10:
                            item.deliverStatus = '用户未确认发货'
                            break;
                        case 20:
                            item.deliverStatus = '用户确认发货'
                            break;
                        case 30:
                            item.deliverStatus = '已发货'
                            break;
                        default:
                            item.deliverStatus = '--'
                            break;
                    }
                    switch (item.useStatus) {
                        case 10:
                            item.useStatus = '未使用'
                            break;
                        case 20:
                            item.useStatus = '待激活'
                            break;
                        case 30:
                            item.useStatus = '已激活'
                            break;
                        default:
                            item.useStatus = '--'
                            break;
                    }
                    switch (item.originType) {
                        case 10:
                            item.originType = '微信平台'
                            break;
                        case 20:
                            item.originType = '抖音平台'
                            break;
                        default:
                            item.originType = '--'
                            break;
                    }
                });
            }
        },
        async getRcId() {
            const params = {
                pageNo: 1,
                pageSize: 1,
                useStatus: 10
            }
            const res = await getRedeemList(params);
            if (res.code == 200 && res.data.length > 0) {
                console.log('res', res);
                this.redeemCode = res.data[0].redeemCode;
                this.rcId = res.data[0].rcId;
                this.centerDialogVisible = true;
            } else {
                this.$message.warning('今日可获取激活码已达上限，请联系后台管理员');
            }
        },
        closeImportData() {
            this.centerDialogVisible = false;
            setTimeout(() => {
                console.log('这里是否执行了重新刷新');
                this.getRedeemListFn();
            }, 1000);
            // this.handleReset();
        },
        closeDeliverInfo() {
            this.deliverDialogVisible = false;
            setTimeout(() => {
                console.log('这里是否执行了重新刷新');
                this.getRedeemListFn();
            }, 1000);
        },
        exportData() {
            this.exportLoading = true;
            let params = {
                pageNo: 1,
                pageSize: 9999
            };
            Axios({
                method: "post",
                url: apiJava + "/api-career/redeem/code/export/redeem/list",
                data: params,
                responseType: "arraybuffer",
                headers: {},
                timeout: "60000",
            })
                .then((res) => {
                    downLoadFile(res, "兑换码数据.xlsx");
                })
                .catch(() => {
                    this.$message.error("导出失败");
                })
                .finally(() => {
                    this.exportLoading = false;
                });
        },
        checkRightDetail(row) {
            this.currentCardType = row.cardType;
            this.rightTreeVisible = true;
        },
        getHeight() {
            this.tableHeight = window.innerHeight - 290;
        },
        handleSearch() {
            console.log('这里发生了查询');
        },
        importData() {
            this.getRcId();
        },
    },
}
</script>

<style lang="scss" scoped>
.wrapper {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: url("../../assets/images/bigBg.png") no-repeat;
    background-position: center;
    background-size: 100% 100%;

    .rl-content {
        margin: 12px 12px 0 12px;
        background-color: #fff;

        .search-box {
            padding: 22px 24px 0 12px;
            border-bottom: 1px solid #e8e8e8;
        }

        .table-wrap {
            flex: 5.2;

            .operate-bar {
                padding-bottom: 20px;
                display: flex;
            }

            /deep/ .header_name_style {
                font-size: 14px;
                font-family: PingFang-SC, PingFang-SC;
                font-weight: bold;
                color: #6c7481;
            }

            .consultant-error,
            .consultant-finish,
            .consultant-shalou {
                margin-left: 5px;
            }

            .consultant-error {
                color: #ff7732;
            }

            .consultant-finish {
                color: #0cb354;
            }

            .consultant-shalou {
                color: #008fc4;
            }
        }
    }

    ::v-deep .no-header-dialog .el-dialog__header {
        display: none;
    }

    ::v-deep .no-header-dialog {
        border-radius: 8px;
    }
}
</style>